<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>用户管理 - <span th:text="${role == 'COLLECTOR' ? '回收员' : '居民'}"></span></h2>
            <div class="d-flex">
                <div class="input-group me-2" style="width: 300px;">
                    <input type="text" class="form-control" id="searchInput" placeholder="搜索姓名或手机号">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchUsers()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <div class="btn-group">
                    <a th:href="@{/admin/users/COLLECTOR}" class="btn btn-outline-primary" th:classappend="${role == 'COLLECTOR' ? 'active' : ''}">回收员</a>
                    <a th:href="@{/admin/users/RESIDENT}" class="btn btn-outline-primary" th:classappend="${role == 'RESIDENT' ? 'active' : ''}">居民</a>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    <tr th:each="user : ${users}">
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.username}"></td>
                        <td th:text="${user.realName}"></td>
                        <td th:text="${user.phone}"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.address}"></td>
                        <td>
                            <span th:if="${user.status == 1}" class="badge bg-success">启用</span>
                            <span th:if="${user.status == 0}" class="badge bg-danger">禁用</span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary" th:onclick="'toggleUserStatus(' + ${user.id} + ',' + ${user.status} + ')'">
                                <i class="fas" th:classappend="${user.status == 1 ? 'fa-ban' : 'fa-check'}"></i>
                                <span th:text="${user.status == 1 ? '禁用' : '启用'}"></span>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" th:onclick="'deleteUser(' + ${user.id} + ')'">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        function searchUsers() {
            const keyword = document.getElementById('searchInput').value;
            const role = '[[${role}]]';
            
            fetch(`/admin/users/search?role=${role}&keyword=${keyword}`)
                .then(response => response.json())
                .then(users => {
                    const tbody = document.getElementById('userTableBody');
                    tbody.innerHTML = users.map(user => `
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.realName}</td>
                            <td>${user.phone}</td>
                            <td>${user.email || ''}</td>
                            <td>${user.address}</td>
                            <td>
                                <span class="badge bg-${user.status == 1 ? 'success' : 'danger'}">
                                    ${user.status == 1 ? '启用' : '禁用'}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="toggleUserStatus(${user.id}, ${user.status})">
                                    <i class="fas ${user.status == 1 ? 'fa-ban' : 'fa-check'}"></i>
                                    ${user.status == 1 ? '禁用' : '启用'}
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteUser(${user.id})">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </td>
                        </tr>
                    `).join('');
                })
                .catch(error => alert('搜索失败: ' + error.message));
        }

        function toggleUserStatus(userId, currentStatus) {
            const newStatus = currentStatus === 1 ? 0 : 1;
            fetch(`/admin/users/${userId}/status?status=${newStatus}`, {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    return response.text().then(text => {
                        throw new Error(text);
                    });
                }
            })
            .catch(error => alert('操作失败: ' + error.message));
        }

        function deleteUser(userId) {
            if (!confirm('确定要删除该用户吗？')) {
                return;
            }
            
            fetch(`/admin/users/${userId}`, {
                method: 'DELETE'
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    return response.text().then(text => {
                        throw new Error(text);
                    });
                }
            })
            .catch(error => alert('删除失败: ' + error.message));
        }

        // 监听搜索框的回车事件
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchUsers();
            }
        });
    </script>
</body>
</html> 